<script setup lang="ts">
import { Table } from '@/components/Table'
import { Search } from '@/components/Search'
import { useI18n } from '@/hooks/web/useI18n'
import { ContentWrap } from '@/components/ContentWrap'
import {unref, h ,reactive, ref, watch} from 'vue'
import { useTable } from './useTable'
import {ElIcon,ElTag,ElSwitch, ElRow, ElCol, ElCard, ElSkeleton, ElTreeV2, ElButton,ElImage, formatter,ElMessage } from 'element-plus'
import { useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { TableColumn } from 'element-plus/es/components/table/src/table-column/defaults'
import { Dialog } from '@/components/Dialog'
import { Descriptions } from '@/components/Descriptions'
import { spawn } from 'child_process'
import { type } from 'os'
import { useRouter } from 'vue-router'
import {getUseCouponTable,giveCoupon } from '@/api/Coupon'
import GiveCoupon from './components/GiveCoupon.vue'

const { push } = useRouter()
const { t } = useI18n()
const columns = reactive([
    {
        field:'user_id',
        label:'用户ID'
    },
    {
        field:'account',
        label:'用户账号',
        
    },
    {
        field:'nickname',
        label:'用户昵称',
        search: {
            show: true
        },
    },
    {
        field:'used',
        label:'已使用'
    },
    {
        field:'notUsed',
        label:'未使用'
    },
    {
        field:'expired',
        label:'已过期'
    },
    {
        field:'action',
        label:'操作'
    }
  
])

const { allSchemas } = useCrudSchemas(columns)
const { register, tableObject, methods } = useTable({
  getListApi: getUseCouponTable,
})
const { getList,setSearchParams } = methods
getList()
 const useCoupon=ref(false)
 

const userId=ref()
const action=async (row)=>{
    useCoupon.value=true
    userId.value=row.user_id
}

const selection = ref();
const giveCoupons= async ()=>{
    const data = await selection.value.getSelections()
    const giveData = ref([])
    for(let i=0;i<data.length;i++){
        giveData.value.push({
            couponId:data[i].coupon_id,
            userId:userId.value,
            state:3,
        })
    }
    const res = await giveCoupon({str:JSON.stringify(giveData.value)})
    if(res!=0){
        ElMessage.success({
            message:'赠送成功'
        })
    }else{
        ElMessage.error({
            message:'赠送失败,请重试'
        })
    }
    useCoupon.value=false
    getList()
}
</script>
<template>
    <ContentWrap title="">
    <Search
      :schema="allSchemas.searchSchema"
      @search="setSearchParams"
      @reset="setSearchParams"
    />
 
     <Table
          v-model:pageSize="tableObject.pageSize"
          v-model:currentPage="tableObject.currentPage"
          :loading="tableObject.loading"
          :columns="allSchemas.tableColumns"
          :data=" 
            tableObject.tableList.slice((tableObject.currentPage - 1) * tableObject.pageSize,tableObject.currentPage * tableObject.pageSize)"
          :pagination="{
            total: tableObject.total
          }"
          @register="register">
         
          <template #action="{ row }">
            <ElButton type="primary" link @click="action(row)">赠送优惠券</ElButton>
         </template>
        </Table>
         <Dialog v-model="useCoupon" >

            <GiveCoupon
            ref="selection"
            />

        <template #footer>
          <ElButton type="primary"  @click="giveCoupons">
                确定
          </ElButton>
          <ElButton @click="useCoupon = false">{{ t('dialogDemo.close') }}</ElButton>
        </template>
      </Dialog>
</ContentWrap>
</template>